<template>
  <div class="lh-button" :style="styleObjectr">
    {{ type }}
    <span>
      <!-- 插槽 -->
      <slot></slot>
    </span>
  </div>
</template>

<script>
export default {
  //父传子
  props: {
    type: {
      type: String,
      default: "primary",
    },
  },
  //数据
  data() {
    return {
    };
  },


  //计算属性
    computed: {
      //样式
      styleObjectr(){
          console.log(this.type)
          if(this.type==='primary'){
              return {
                  "background":"linear-gradient(to right, pink, red)",
                  }
          }else if(this.type==='danger'){
              return{
                  "background":"linear-gradient(to right,yellow, red)"
              }
          }
      }
    },
};
</script>

<style lang="less" scopeds>
.lh-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  -webkit-appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
  //   background: linear-gradient(to right, pink, red);
  color: #000;
  margin-bottom: 30px;
  margin-right: 30px;
}
</style>